<template>
  <div>
    <ul>
      <li v-for="(item) in options" :key="item.value">{{item.name}}</li>

      <el-menu  class="el-menu-demo" mode="vertical">
        <item :menu="options"></item>
      </el-menu>

    </ul>
  </div>
</template>

<script>
import Item from "@/components/collapseMenu/item";
export default {
  name: "childOne" ,
  components: {Item},
  data(){
    return{
      options:[
        {
          name:'A',
          value:'1',
          children:[
            {
              name:'A-A',
              value:'11',
              children:[
                {
                  name:'A-A-A',
                  value:'111',
                },
                {
                  name:'A-A-B',
                  value:'112',
                }
              ]
            },{
              name:'A-B',
              value:'12',
            },{
              name:'A-C',
              value:'13',
            },
          ]
        }, {
          name:'B',
          value:'2'
        },{
          name:'C',
          value:'3'
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>